<template>
  <!-- 客户基本信息 -->
  <div>
    <van-nav-bar left-arrow title="客户详情" @click-left="onClickLeft">
      <template #right>
        <van-icon name="wap-home-o" size="24" />
      </template>
    </van-nav-bar>
    <van-row align="center" class="title">
      <van-col span="6" class="title_cont"
        ><img src="../assets/img/头像.png" alt=""
      /></van-col>
      <van-col span="12" class="name">{{ custName }}</van-col>
      <van-col span="6" class="bj" @click="bjClick(id)"><van-icon name="records" />编辑信息</van-col>
    </van-row>
    <div class="content">
      <van-row class="content_title">
        <van-col span="4"
          ><img src="../assets/img/基本信息.png" alt=""
        /></van-col>
        <van-col span="20">基本信息</van-col>
      </van-row>
      <van-row class="content_text">
        <van-col span="5">客户名称</van-col>
        <van-col span="19">{{ custName }}</van-col>
      </van-row>
      <van-row class="content_text">
        <van-col span="5">联系电话</van-col>
        <van-col span="19">{{ telephone }}</van-col>
      </van-row>
      <van-row class="content_text">
        <van-col span="5">学历</van-col>
        <van-col span="19">{{ education }}</van-col>
      </van-row>
      <van-row class="content_text">
        <van-col span="5">性别</van-col>
        <van-col span="19">{{ sex }}</van-col>
      </van-row>
      <van-row class="content_text">
        <van-col span="5">所属城市</van-col>
        <van-col span="19">{{cityName}}</van-col>
      </van-row>
      <van-row class="content_text">
        <van-col span="5">公司名称</van-col>
        <van-col span="19">{{ company }}</van-col>
      </van-row>
      <van-row class="content_text">
        <van-col span="5">职位</van-col>
        <van-col span="19">{{ position }}</van-col>
      </van-row>
      <van-row class="content_text">
        <van-col span="5">录入时间</van-col>
        <van-col span="19">{{ createTime }}</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { GetCustData } from "@/request/api";
export default {
  data() {
    return {
      custName: "",
      telephone: "",
      education: "",
      sex: "",
      cityName: "",
      company:'',
      position: "",
      createTime: "",
      id:''
    };
  },
  created() {
    GetCustData(this.$route.query.id).then((res) => {
      console.log(res);
      this.custName = res.data.custName;
      this.telephone = res.data.telephone;
      this.education = res.data.education;
      this.sex = res.data.sex;
      this.cityName = res.data.cityName;
      this.position = res.data.position;
      this.createTime = res.data.createTime;
      this.company = res.data.company
      this.id = res.data.id
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    bjClick(val){
      // 跳转到编辑页面
      this.$router.push("/custedit?id=" + val)
    }
  },
};
</script>
 
<style lang = "less" scoped>
.van-nav-bar {
  background-color: rgb(6, 6, 139);
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
}
.title {
  background-color: rgb(6, 6, 139);
  color: #fff;
  padding: 20px 0 20px 10px;
}
.title_cont {
  height: 100%;
  text-align: center;
  img {
    width: 80%;
  }
}
.name {
  padding-top: 30px;
}
.bj {
  height: 32px;
  line-height: 32px;
  margin-top: 20px;
  text-align: center;
  background-color: blue;
  border-radius: 20px 0 0 20px;
}
.content {
  height: 505px;
  margin: 0 10px;
  border-radius: 10px 10px 0 0;
  background: url("../assets/img/底纹.png") no-repeat center 100%;
}
.content_title {
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #ccc;
  .van-col--4 {
    text-align: center;
    height: 100%;
    img {
      padding-top: 12px;
      width: 40%;
    }
  }
  .van-col--20 {
    font-weight: 900;
  }
}
.content_text {
  height: 32px;
  line-height: 32px;
}
.van-col--5 {
  text-align: right;
}
.van-col--19 {
  padding-left: 8px;
}
</style>